<script setup lang="ts">
import { useRoute, RouterLink, RouterView } from 'vue-router'
import { computed } from 'vue'
import router from './router'

const routers = useRoute<any>(router)
console.log(routers)
const Elmentrouter = ['ElemrntUI', 'ElementUser', 'ElementSole']
const isshow = computed(() => {
  return Elmentrouter.includes(routers.name as string)
})
</script>

<template>
  <header v-if="!isshow">
    <div class="wrapper">
      <nav>
        <RouterLink to="/">首页</RouterLink>
        <RouterLink to="/studeno">第一个</RouterLink>
        <RouterLink to="/studemo7">选项式API</RouterLink>
        <RouterLink to="/studemo8">组合式API</RouterLink>
        <RouterLink to="/studeno2">自定义渲染函数</RouterLink>
        <RouterLink to="/studeno3">使用jsx语法渲染 </RouterLink>
        <RouterLink to="/studeno4">使用jsx条件语法渲染 </RouterLink>
        <RouterLink to="/studeno5">ref响应式</RouterLink>
        <RouterLink to="/studemo6">setup语法糖(ts)</RouterLink>
        <RouterLink to="/studemo21">模板语法-文本</RouterLink>
        <RouterLink to="/studemo22">模板语法-属性</RouterLink>
        <RouterLink to="/studemo23">内置指令</RouterLink>
        <RouterLink to="/studemo24">Class 与 Style 绑定</RouterLink>
        <RouterLink to="/studemo25">绑定内联样式</RouterLink>
        <RouterLink to="/studemo31">声明响应式状态 ref</RouterLink>
        <RouterLink to="/studemo32">Reactive包装注意事项</RouterLink>
        <RouterLink to="/studemo33">reactive() 的局限性</RouterLink>
        <RouterLink to="/studemo34">额外的 ref 解包细节</RouterLink>
        <RouterLink to="/studemo35">ref工具</RouterLink>
        <RouterLink to="/studemo411">计算属性</RouterLink>
        <RouterLink to="/stduydemo1">案例-学生管理系统</RouterLink>
        <RouterLink to="/studemo36">watch监听器</RouterLink>
        <RouterLink to="/studemo37">watch监听数据源</RouterLink>
        <RouterLink to="/studemo38">watch侦听器-副作用清理</RouterLink>
      </nav>
      <br />
      <nav>
        <RouterLink to="/studemo51">注册全局组件</RouterLink>
        <RouterLink to="/studemo412">组件传值 Props</RouterLink>
        <RouterLink to="/studemo413">emit事件函数</RouterLink>
        <RouterLink to="/studemo414">插槽slots</RouterLink>
        <RouterLink to="/studemo415">生命周期</RouterLink>
        <RouterLink to="/studemo416">生命周期衔接</RouterLink>
        <RouterLink to="/studemo417">definePorps以及defineEmits</RouterLink>
        <RouterLink to="/studemo418">练习案例</RouterLink>
        <RouterLink to="/studemo419">练习案例1-2</RouterLink>
        <RouterLink to="/studemo420">练习案例1-slot</RouterLink>
        <RouterLink to="/studemo52">周六案例</RouterLink>
        <RouterLink to="/studemo53">周六案例1-1</RouterLink>
        <RouterLink to="/studemo54">周六案例1-2</RouterLink>
        <RouterLink to="/studemo55">练习案例1-3</RouterLink>
        <RouterLink to="/studemo56">Fetch请求</RouterLink>
        <RouterLink to="/studemo57">Axios请求</RouterLink>
        <RouterLink to="/studemo58">Axios请求封装函数1-2</RouterLink>
        <RouterLink to="/studemo59">Axios请求案例</RouterLink>
        <RouterLink to="/studemo60">嵌套路由</RouterLink>
        <RouterLink to="/studemo61">pinia状态管理</RouterLink>
        <RouterLink to="/ElemrntUI">ElementUI案例</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped lang="scss">
header {
  // border-bottom: 1px solid var(--color-border2);
  padding: 10px 0;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    color: blue;
  }
}
</style>
